<?php require VIEWPATH. "cms". DIRECTORY_SEPARATOR. 'header.php'?>
<div class="banner">
    <div id="focus1" class="focus">
        <div class="hd">
            <ul>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <?php foreach($sliderList as $slider): ?>
                    <li><a style="background-image:url(<?=$slider['slider_image']?>);" href="<?=$slider['slider_link']?>">&nbsp;</a></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="indexpd index1 animated">
    <?php foreach($topCateList as $cate): ?>
    <div class="container ">
        <div class="index_title">
            <a href="<?=web_url('cms/category/'. $cmsInfo['cms_token'])?>/<?=$cate['id']?>">
                <p><?=$cate['category_name']?></p>
            </a>
            <a href="<?=web_url('cms/category/'. $cmsInfo['cms_token'])?>/<?=$cate['id']?>" class="index_more">查看全部</a>
        </div>
        <div class="index_news">
            <?php $topArticle = isset($cate['article'][0]) ? $cate['article'][0] : ""; ?>
            <?php if($topArticle): ?>
                <div class="row clearfix">
                    <div class="col-xs-12 col-md-6 slideLeft" style="padding: 30px 0px 30px 60px">
                        <img src="<?=$topArticle['article_cover']?>" alt="<?=$topArticle['article_title']?>" class="center-block img-responsive" width="100%">
                    </div>
                    <div class="col-xs-12 col-md-6 slideRight">
                        <div class="con" style="padding: 30px 60px">
                            <div class="tt ellipsis"><?=$topArticle['article_title']?></div>
                            <div class="p"><?=mb_substr(strip_tags($topArticle['article_content']), 0, 80, WEB_CHARSET)?>......</div>
                            <a href="<?=web_url('cms/article/'. $cmsInfo['cms_token'])?>/<?=$topArticle['id']?>" class="red_btn">查看详情 +</a>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        <div class="index_news_four index2 animated">
            <div class="row clearfix">
                <?php foreach($cate['article'] as $key => $article): ?>
                    <?php if($key == 0 || $key > 4) continue; ?>
                    <div class="col-xs-12 col-md-3">
                        <a href="<?=web_url('cms/article/'. $cmsInfo['cms_token'])?>/<?=$article['id']?>">
                            <div class="row clearfix">
                                <div class="col-xs-2 col-md-3 date">
                                    <h1><?=date("d", strtotime($article['createtime']))?></h1>
                                    <p><?=date("Y.m", strtotime($article['createtime']))?></p>
                                </div>
                                <div class="col-xs-10 col-md-9">
                                    <div class="tt towLine"><?=$article['article_title']?></div>
                                    <p class="threeLine"><?=mb_substr(strip_tags($article['article_content']), 0, 100, WEB_CHARSET)?>.........</p>
                                    <span class="red">详情 &gt;&gt;</span>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php foreach($articleCate as $cate): ?>
<div class="indexpd index4 animated">
    <div class="container ">
        <div class="index_title">
            <a href="<?=web_url('cms/category/'. $cmsInfo['cms_token'])?>/<?=$cate['id']?>">
                <p><?=$cate['category_name']?></p>
            </a>
        </div>
        <div class="index_news index_about">
            <div class="row clearfix">
                <div class="col-xs-12 col-md-4 slideLeft">
                    <img src="<?=$cate['category_article_cover']?>" class="center-block img-responsive img">
                </div>
                <div class="col-xs-12 col-md-8 slideRight">
                    <div class="con">
                        <div class="p"><?=mb_substr(strip_tags($cate['category_article_content']), 0, 300, WEB_CHARSET)?>......</div>
                        <a href="<?=web_url('cms/category/'. $cmsInfo['cms_token'])?>/<?=$cate['id']?>" class="red_btn">查看详情 +</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
<?php endforeach; ?>
<div class="indexpd indexGrey index5 animated">
    <div class="container ">
        <div class="index_title" style="opacity: 1; display: block; transform: translateY(0px);">
            <a>
                <p>友情链接</p>
            </a>
        </div>
        <div class="index_links">
            <div class="row clearfix">
                <?php foreach($linkList as $link): ?>
                <div class="col-xs-4 col-md-2">
                    <a href="<?=$link['link_src']?>" target="_blank">
                        <img src="<?=$link['link_image']?>" width="88" height="31" border="0">
                    </a>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
<?php require VIEWPATH. "cms". DIRECTORY_SEPARATOR. 'footer.php'?>
<script src="<?=$staticUrl?>assets/cms/jquery-1.js" type="text/javascript"></script> 
<script src="<?=$staticUrl?>assets/cms/bootstrap.js"></script> 
<script src="<?=$staticUrl?>assets/cms/common.js" type="text/javascript"></script> 
<script src="<?=$staticUrl?>assets/cms/touchslide.js" type="text/javascript"></script> 
<script src="<?=$staticUrl?>assets/cms/velocity.js" type="text/javascript"></script> 
<script src="<?=$staticUrl?>assets/cms/velocity_002.js" type="text/javascript"></script> 
<script>
    $(function () {
        TouchSlide({
            slideCell: "#focus1",
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "leftLoop",
            interTime: 5000,
            autoPlay: true,
            autoPage: true,
        });

        var scrollPos = $(window).scrollTop() + $(window).height() - 100;
        if (!$(".index1").hasClass('animated') && scrollPos > $(".index1").offset().top) {
            $(".index1").addClass('animated');
            $(".index1 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
            $(".index1 .slideLeft").velocity('transition.slideLeftBigIn', { delay: 300, duration: 1000, stagger: 300 });
            $(".index1 .slideRight").velocity('transition.slideRightBigIn', { delay: 600, duration: 1000, stagger: 300 });
        }
        //页面滚动
        $(window).scroll(function () {
            var scrollPos = $(window).scrollTop() + $(window).height() - 100;
            //动画
            if (!$(".index1").hasClass('animated') && scrollPos > $(".index1").offset().top) {
                $(".index1").addClass('animated');
                $(".index1 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
                $(".index1 .slideLeft").velocity('transition.slideLeftBigIn', { delay: 300, duration: 1000, stagger: 300 });
                $(".index1 .slideRight").velocity('transition.slideRightBigIn', { delay: 600, duration: 1000, stagger: 300 });
            }
            if (!$(".index2").hasClass('animated') && scrollPos > $(".index2").offset().top) {
                $(".index2").addClass('animated');
                $(".index2 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
                $(".index2 .col-xs-12").velocity('transition.slideUpBigIn', { delay: 300, stagger: 300 });

            }

            if (!$(".index3").hasClass('animated') && scrollPos > $(".index3").offset().top) {
                $(".index3").addClass('animated');
                $(".index3 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
                $(".index3 .item").velocity('transition.slideUpBigIn', { delay: 300, stagger: 300 });
            }
            if (!$(".index4").hasClass('animated') && scrollPos > $(".index4").offset().top) {
                $(".index4").addClass('animated');
                $(".index4 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
                $(".index4 .slideLeft").velocity('transition.slideLeftBigIn', { delay: 300, duration: 1000, stagger: 300 });
                $(".index4 .slideRight").velocity('transition.slideRightBigIn', { delay: 600, duration: 1000, stagger: 300 });
            }
            if (!$(".index5").hasClass('animated') && scrollPos > $(".index5").offset().top) {
                $(".index5").addClass('animated');
                $(".index5 .index_title").velocity('transition.slideUpBigIn', { duration: 1000 });
                $(".index5 .col-xs-4").velocity('transition.slideUpBigIn', { delay: 300, stagger: 300 });
            }
        });
    });
</script>
</body>
</html>